<template>
  <div class="jingluo-kang-box">
    <page-reload v-show="state.loadErr" @needReload="getAcupoint"></page-reload>
    <template v-if="!state.loadErr">
      <div class="yuanze-s" v-if="state.principle">
        <div class="y-title">经络原则</div>
        <div class="y-desc" v-html="state.principle"></div>
      </div>
      <div class="foodCard">
        <div class="title">调理细则</div>
        <template  v-for="(item, k) in state.prescribleDetails" >
          <div class="s-li" :class="{'marB12': k==state.prescribleDetails.length-1 }" :key="k" v-if="k!=2 && item" v-html="item"></div>
          <div class="s-tip" :class="{'marB12': k==state.prescribleDetails.length-1 }"  :key="k" v-if="k==2 && item">
            <p v-html="item"></p>
          </div>
        </template>
      </div>
      <div class="foodCard">
        <div class="title">穴位清单</div>
        <div class="xueCard">
          <video v-show="!state.activeAcupoints.videoFirstLoade" controlslist="nodownload" @play="fullscreenchange(activeAcupoints)"  id="actVideoId" x-webkit-airplay="allow" :src="state.activeAcupoints.technicAcupointResUrl" muted="muted" controls="controls" preload="auto" x5-video-player-fullscreen="true" class="videoStyle"></video>
          <img :src="state.activeAcupoints.technicAcupointPicture" class="xueImg" v-show="state.activeAcupoints.videoFirstLoade">
          <div class="videoBtn" @click="playVideo" v-show="state.activeAcupoints.videoFirstLoade"></div>
        </div>
        <lz-menu :menuItems="state.acupoints" :defaultIndex="0" @clickLzMenuItem="tabMenuItem" class="tabtwo" :parenId="state.acIndex"/>
        <div class="jl-li">
          <span class="jl-name">取穴方法</span>
          <span class="jl-text">{{state.activeAcupoints.technicAcupointPointLocating}}</span>
        </div>
        <div class="jl-li">
          <span class="jl-name">按摩要点</span>
          <span class="jl-text">{{state.activeAcupoints.technicAcupointMassageEssentials}}</span>
        </div>
        <div class="jl-li">
          <span class="jl-name">主要事项</span>
          <span class="jl-text">{{state.activeAcupoints.technicAcupointAnnouncements}}</span>
        </div>
      </div>
      <div class="foodCard">
        <div class="title">调理计划</div>
        <div class="s-tip">
          <template v-for="(item,k) in state.conditionPlan">
            <div class="s-li"  :key="k" v-if="item">{{item}}</div>
          </template>
        </div>
      </div>
    </template>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch, toRefs, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { Toast } from 'vant';
import {http} from "@/axios/http";
import * as API from "@/axios/api";
import utils from '@/utils/utils.ts';
import PageReload from '@/components/pageReload.vue';
import LzMenu from '@/components/LzMenu.vue';

const route = useRoute();
let state = reactive({
  principle: '',
  prescribleDetails: [],
  conditionPlan: [],
  acupoints: [],
  activeAcupoints : {
    videoFirstLoade: false,
    hasAddListen: false
  },
  loadErr: false
})

let props = defineProps<{
  doLoad: boolean,
  acTab: string|number
}>()
let emit = defineEmits(['loadFaild'])
let { doLoad, acTab } = toRefs(props);

watch(doLoad, (newVal, oldVal) => {
  if (newVal) {
    getAcupoint()
  }
})
watch(acTab, (newVal, oldVal) => {
  if(newVal!==3){
    let video = document.getElementById('actVideoId')
    video&&video.pause()
  }
})

let getAssetImg = (src) => {
  return new URL(src, import.meta.url).href
}

let getAcupoint = () => {
  Toast.loading({
    mask: false,
    message: '',
    duration: 0
  })
  http({
    baseUrl: API.baseUrl,
    url: API.acupunctureMassage,
    method: 'GET',
    params: {
      userId: route.query.userId
    }
  },(res) =>{
    Toast.clear()
    state.loadErr = false
    if (res && res.data && res.data.code === 200){
      let data = res.data.data
      state.principle = data.principle || ''
      if (data.conditionPlan) {
        state.conditionPlan = data.conditionPlan.split('\n')
      }
      state.acupoints = data.acupoints || []
      state.activeAcupoints = state.acupoints[0] || {}
      state.activeAcupoints.videoFirstLoade = true
      state.prescribleDetails= data.prescribleDetails || []
    } else {
      emit('loadFaild', 3)
      utils.toastMsg(res, state, API.acupunctureMassage)
    }
  })
}
let playVideo = () => {
  let video = document.getElementById('actVideoId')
  state.activeAcupoints.videoFirstLoade = false
  // this.$forceUpdate()
  nextTick(()=>{
    video.play()
  })
}
let fullscreenchange = () =>{
  let video = document.getElementById('actVideoId')
  if (state.activeAcupoints.hasAddListen) {
    return
  }
  // 仅安卓机可用，解决部分安卓机video打开后层级置顶，盖住底部输入框问题
  video.addEventListener('x5videoexitfullscreen', () => {
    state.activeAcupoints.hasAddListen = true
    state.activeAcupoints.videoFirstLoade = true
  }, false)

}
let tabMenuItem = (item) => {
  state.activeAcupoints = state.acupoints[item.key]
  state.activeAcupoints.videoFirstLoade = true
}
</script>

<style scoped lang="scss">
.jingluo-kang-box{
  .yuanze-s{
    background-image: url("../../../assets/images/report/xuewei-kang.png");
  }
  .xueCard{
    width: 100%;
    height: auto;
    text-align: center;
    //background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 30px;
    position: relative;
    background-color: #EEF4F9;
    font-size: 0;
  }
  .videoStyle{
    width: 100%;
  }
  .xueImg{
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid #C0D6E4;
    //position: absolute;
    //top: 0;
    //left: 0;
  }
  .videoBtn {
    width: 28px;
    height: 27px;
    position: absolute;
    left: 151px;
    top: 50%;
    transform: translateY(-13px);
    background: url("../../../assets/images/icon/icon_start.png") no-repeat;
    background-size: 100% 100%;
    z-index: 3;
  }
}
</style>
